<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--注意：引入js脚本不要使用标签的缩写形式-->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:700px;"></div>
<div id="main2" style="width: 1000px;height:700px;"></div>
<div id="main3" style="width: 1000px;height:700px;"></div>
<div id="main4" style="width: 1000px;height:700px;"></div>
</body>
</html>
<script type="text/javascript">
   //柱状图
    $(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        console.log(myChart);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '当前在训班级各班平均成绩',
                subtext: '真实可靠',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['提交率', '完成率']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['java200', 'java201', 'java202', 'java203']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '提交率',
                    type: 'bar',
                    data: [80,90,88,85],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '完成率',
                    type: 'bar',
                    data: [80,50,40,90],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //发送异步请求，获取当前在训班级的平均成绩

        $.ajax({
            type:"get", //向后台发送请求的方式
            url:"listEveryClassesCoreTaskCompleteRateAndCoreSubmitRate", //向后台请求的url地址
            dataType:"json", //服务器返回的数据类型
            success:function(data){
                //异步交互成功的回调函数，data就是后台返回的json数据
                console.log(data);
                //声明数组
                var classnames = [];
                var avg_cores = [];
                var submit_rates = [];
                for(var i = 0; i < data.length; i++){
                    var  obj = data[i];
                    var f_classname =obj.f_classname;
                    var avg_core =obj.avg_core;
                    var submit_rate =obj.submit_rate;
                    classnames[i]=f_classname;
                    avg_cores[i]=avg_core;
                    submit_rates[i]=submit_rate;
                }
                //console.log(arr);
                myChart.setOption({
                    xAxis: [{
                        data: classnames
                        // data: arr1
                    }],
                    series: [{
                        // 根据名字对应到相应的系列
                        name: ['完成率'],
                        data: avg_cores
                        //     data: arr2
                    },{
                        name: ['提交率'],
                        data: submit_rates
                        // data: arr3
                    }
                    ]
                });
            },
            error:function(){
                alert("异步交互失败~");
            }
        });

        // $.ajax({
        //     type:"get", //向后台发送请求的方式
        //     url:"listEveryClassesCoreTaskCompleteRateAndCoreSubmitRate", //向后台请求的url地址
        //     dataType:"json", //服务器返回的数据类型
        //     success:function(data){
        //         //异步交互成功的回调函数，data就是后台返回的json数据
        //         console.log(data);
        //         //声明数组
        //         var arr1 = [];
        //         var arr2 = [];
        //         var arr3 = [];
        //         //循环遍历服务器返回的数组对象
        //         for(var i = 0; i < data.length; i++){
        //             //获取每一个数组元素
        //             var  obj = data[i];
        //             //获取obj对象的属性值
        //             var avg_core = obj.avg_core;
        //             var submit_rate = obj.submit_rate;
        //             var f_classname =obj.f_classname;
        //             arr1[i] = avg_core;
        //             arr2[i]=submit_rate;
        //             arr3[i]=f_classname;
        //         }
        //         //console.log(arr);
        //         myChart.setOption({
        //             xAxis:[
        //                 {data:arr3
        //                 }
        //             ],
        //             series: [{
        //                 data: arr2,
        //             },{
        //                 data:arr1
        //             }
        //             ]
        //         });
        //     },
        //     error:function(){
        //         alert("异步交互失败~");
        //     }
        // });

    })

   //饼状图
   $(function(){
       var myChart2 = echarts.init(document.getElementById('main2'));
       var option = {
           title: {
               text: '当前在训班级各班平均成绩',
               subtext: '真实可靠',
               left: 'center'
           },
           tooltip: {
               trigger: 'item'
           },
           legend: {
               orient: 'vertical',
               left: 'left',
           },
           series: [
               {
                   name: '班级平均成绩',
                   type: 'pie',
                   radius: '50%',
                   data: [
                       {value: 1048, name: '搜索引擎'},
                       {value: 735, name: '直接访问'},
                       {value: 580, name: '邮件营销'},
                       {value: 484, name: '联盟广告'},
                       {value: 300, name: '视频广告'}
                   ],
                   emphasis: {
                       itemStyle: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       }
                   }
               }
           ]
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart2.setOption(option);
       //发送异步请求，获取当前在训班级的平均成绩
       $.ajax({
           type:"get", //向后台发送请求的方式
           url:"listEveryClassAvgScore", //向后台请求的url地址
           dataType:"json", //服务器返回的数据类型
           success:function(data){
               //异步交互成功的回调函数，data就是后台返回的json数据
               console.log(data);
               //声明数组
               var arr = [];
               //循环遍历服务器返回的数组对象
               for(var i = 0; i < data.length; i++){
                   //获取每一个数组元素
                   var  obj = data[i];
                   //获取obj对象的属性值
                   var classname = obj.f_classname;
                   var avg_score = obj.score_avg;
                   //声明对象
                   var target = {};
                   target.name = classname;
                   target.value = avg_score;
                   arr[i] = target;
               }
               //console.log(arr);
               myChart2.setOption({
                   series: [{
                       data: arr
                   }]
               });
           },
           error:function(){
               alert("异步交互失败~");
           }
       });
   })

   //漏斗图
   $(function () {
       var myChart3 = echarts.init(document.getElementById('main3'));
       var option = {
           title: {
               text: '学员等级',

           },
           tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c}"
           },
           toolbox: {
               feature: {
                   dataView: {readOnly: false},
                   restore: {},
                   saveAsImage: {}
               }
           },
           legend: {
               data: ['A类','B类','C类','D类','E类']
           },

           series: [
               {
                   name:'学员等级',
                   type:'funnel',
                   left: '10%',
                   top: 60,
                   //x2: 80,
                   bottom: 60,
                   width: '80%',
                   // height: {totalHeight} - y - y2,
                   min: 0,
                   max: 100,
                   minSize: '0%',
                   maxSize: '100%',
                   sort: 'descending',
                   gap: 2,
                   label: {
                       show: true,
                       position: 'inside'
                   },
                   labelLine: {
                       length: 10,
                       lineStyle: {
                           width: 1,
                           type: 'solid'
                       }
                   },
                   itemStyle: {
                       borderColor: '#fff',
                       borderWidth: 1
                   },
                   emphasis: {
                       label: {
                           fontSize: 20
                       }
                   },
                   data: [
                       {value: 60, name: "A类"},
                       {value: 80, name: "B类"},
                       {value: 100, name: "C类"},
                       {value: 40, name: "D类"},
                       {value: 20, name: "E类"}
                   ]
               }
           ]
       };
       myChart3.setOption(option);
       $.ajax({
           type:"get", //向后台发送请求的方式
           url:"listStudentLevelCount", //向后台请求的url地址
           dataType:"json", //服务器返回的数据类型
           success:function(data){
               //异步交互成功的回调函数，data就是后台返回的json数据
               console.log(data);
               //声明数组
               var arr = [];
               var i = 0;
               for(var key in data)
               {
                   var target = {};
                   target.name = key;
                   target.value = data[key];
                   arr[i] = target;
                   i++;
               }


               //循环遍历服务器返回的数组对象
               // var arr = [];
               // Set<var> set = data.keySet();
               // Iterator<String> iterator = set.iterator();
               // while (iterator.hasNext()){
               //     var target = {};
               //     target.key = iterator.next();
               //     target.value = date.get(target.key);
               //     arr[i] = target;
               //     i++;
               // }

               // var arr = [];
               // Set<Map.Entry<String, String>> entries = data.entrySet();
               // for(Map.Entry<String, String> en in entries){
               //     // String key = en.getKey();
               //     // String value = en.getValue();
               //     var target = {};
               //     target.key = en.getKey();
               //     target.value = en.getValue();
               //     arr[i] = target;
               //     i++;
               // }

               console.log(arr);
               myChart3.setOption({
                   series: [{
                       data: arr
                   }]
               });
           },
           error:function(){
               alert("异步交互失败~");
           }
       });
   })

    //饼状图
    // $(function(){
    //     var myChart2 = echarts.init(document.getElementById('main2'));
    //
    //     var option = {
    //         title: {
    //             text: '本周各班级平均成绩',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'item'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'left',
    //         },
    //         series: [
    //             {
    //                 name: '平均成绩',
    //                 type: 'pie',
    //                 radius: '50%',
    //                 data: [
    //                     {value: 72, name: 'java200'},
    //                     {value: 68, name: 'java201'},
    //                     {value: 60, name: 'java202'},
    //                     {value: 75, name: 'java203'},
    //                     {value: 65, name: 'java204'}
    //                 ],
    //                 emphasis: {
    //                     itemStyle: {
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     };
    //     // 使用刚指定的配置项和数据显示图表。
    //     myChart2.setOption(option);
    // })

   // //折线图
   // $(function () {
   //     var myChart4 = echarts.init(document.getElementById('main4'));
   //     var option = {
   //         title: {
   //             text: '折线图堆叠'
   //         },
   //         tooltip: {
   //             trigger: 'axis'
   //         },
   //         legend: {
   //             data: ['在训人数', '项目经理', '重点关注人数', '课程阶段']
   //         },
   //         grid: {
   //             left: '3%',
   //             right: '4%',
   //             bottom: '3%',
   //             containLabel: true
   //         },
   //         toolbox: {
   //             feature: {
   //                 saveAsImage: {}
   //             }
   //         },
   //         xAxis: {
   //             type: 'category',
   //             boundaryGap: false,
   //             data: ['java200', 'java201', 'java202', 'java203']
   //         },
   //         yAxis: {
   //             show:true,
   //             position: 'left',
   //             type: 'value'
   //
   //         },
   //         series: [
   //             {
   //                 name: '在训人数',
   //                 type: 'line',
   //                 stack: '总量',
   //                 data: [79, 73, 81, 75]
   //             },
   //             {
   //                 name: '项目经理',
   //                 type: 'line',
   //                 //stack: '总量',
   //                 data: ["张三","李四","王五","赵六"]
   //             },
   //             {
   //                 name: '重点关注人数',
   //                 type: 'line',
   //                 stack: '总量',
   //                 data: [2, 3, 3, 1]
   //             },
   //             {
   //                 name: '课程阶段',
   //                 type: 'line',
   //                 //stack: '总量',
   //                 data: ["框架","编程","应用","测试"]
   //             }
   //
   //         ]
   //     };
   //     myChart4.setOption(option);
   // })



</script>


